<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>党建会议助手</title>
    <link rel="stylesheet" href="../../../css/mui.min.css" />

    <link rel="stylesheet" type="text/css" href="../../../css/app.css" />
    <link rel="stylesheet" href="../../../npl/css/vant.mini.css" />
    <link rel="stylesheet" href="../css/meetingVoice.css" />
    <script src="../../../js/jquery-3.6.0.min.js"></script>
    <script src="../../../js/flexible.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/sm2.js"></script>
    <script src="../../../js/sm3.js"></script>
    <script src="../../../js/clipboard.js"></script>
    <script src="../../../npl/js/vant.mini.js"></script>
    <script src="../../../js/vconsole.min.js"></script>
    <script src="../../text.js" type="text/javascript"></script>
    <script src="../../../js/mui.min.js"></script>


    <script src="../js/util.js" type="text/javascript"></script>

</head>

<body class="program-body">
    <div id="app" v-cloak>
        <div class="is-loading">
            <div class="curtain">
                <div class="loadingBgc">
                    <div class="loader"></div>
                </div>
            </div>
        </div>
        <div class="trainTickets program-main">
            <div class="header_tit">
                <van-nav-bar title="党建会议助手" :border=false left-arrow>
                    <template #left>
                        <div class="back_l active-brightness" @click="home()">
                            <img src="../../../image/left.png" alt="" />
                        </div>
                    </template>
                </van-nav-bar>
            </div>
            <!-- 离线语音 -->
            <div class="step2">
                <div class="offline-main">
                  <div class="offline-header">
                    <div class="offline-header1">
                      <div class="offline-time-icon"></div>
                      <div class="offline-time-duration">{{getVoiceDuration()}}</div>
                      <div class="offline-time-date">{{getCreateTimeDate()}}</div>
                      <div class="offline-time-hour">{{getCreateTimeHour()}}</div>
                    </div>
                    <div class="offline-header2">
                      {{meetingName}}
                    </div>
                  </div>
                  <div class="offline-body" ref="offlineScroll">
                    <div id="targetDiv">
                        <div class="offline-play-bar" 
                            @mousedown="isDraging = true" @mouseup="isDraging = false">
                            <van-slider class="offline-play-bar-slider" v-model="playProcess" button-size="12px" active-color="rgb(185, 235, 245)"
                                vertical
                                @change="setProcessFunc" />
                        </div>
                        <div class="centent_wrapper" ref="cententWrapper" id="centent_wrapper" :contenteditable="isEditable">
                            <div v-cloak v-for="(item,index) in audio_speaker_content" >
                                <strong contenteditable="false" class="title_header" :id="index" @click="handleSpeakerEdit(item,index)"
                                    :style="getSpeakerNameColor(item.speakerName)">{{item.speakerName + ':'}}</strong>
                                <!-- <strong class="title_header"
                                    :style="getSpeakerNameColor(item.speakerName)">:</strong> -->
                                <br>
                                <span class="text_box" :id="content.serialNum" v-for="content in item.content"
                                    @click="readText(content)" :contenteditable="isEditable">{{content.word}}</span>
                            </div>
                        </div>
                    </div>
                  </div>
                  <div class="offline-oper">
                    <div class="chat-a-btn-l">
                      <van-dropdown-menu active-color="#FF0000" direction="up">
                        <van-dropdown-item v-model="playSpeed" :options="speedList" @change="clickFunc('speed')"/>
                      </van-dropdown-menu>
                      <div class="offline-play" v-if="!isPlaying" @click="clickFunc('play')"></div>
                      <div class="offline-pause" v-if="isPlaying" @click="clickFunc('pause')"></div>
                    </div>
                    <div class="chat-a-btn-r">
                      <!-- <div class="offline-edit" @click="handleOfflineEdit"></div> -->
                      <div class="offline-copy" @click="handleOfflineCopy"></div>
                    </div>
                  </div>
                </div>
            </div>

            <audio ref="audio" id="course-aud" @play="playFunc" @pause="pauseFunc"
                @timeupdate="timeupdateFunc" @waiting="waitingFunc" preload="auto" @canplay="canplayFunc"
                @error="errorFunc" :src="audioSrc">
            </audio>

            <!-- 标题编辑弹框 -->
            <!-- <van-popup style="min-height: 4rem; width: 80%; padding: 20px 10px 10px;display: flex;
                justify-content: space-around;flex-direction: column;" :close-on-click-overlay="false" round v-model="showMTitlePop">
              <van-form>
                <div style="text-align: center;font-size: 18px;font-weight:bold;">标题重命名</div>
                <van-field v-model="editMeetingName" class="edit_title_input" placeholder="请输入标题" maxlength="100" />
              </van-form>
              <div class="edit_title__btn">
                <van-button type="default" round @click="cancelTitleEdit">取消</van-button>
                <van-button type="primary" color="#13C09B" round @click="handleMeetitleEdit">确定</van-button>
              </div>
            </van-popup> -->
        </div>
    </div>

    <script src="../js/meetingVoice.js"></script>
</body>

</html>